<template>
	<div>
		<el-dialog title="流程历史版本" :close-on-click-modal="false" v-model="visible" width="95%" @close="refreshEmit">
			<el-table :data="processlistHis" v-loading="loading" ref="processlistHisTable" @selection-change="selectionChangeHandle" border>
				<el-table-column type="index" label="序号"></el-table-column>
				<el-table-column prop="id" label="编号" show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="deploymentId" label="部署编号" show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="name" label="流程名称" show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="version" width="80" label="版本号"></el-table-column>
				<el-table-column prop="deployTime" label="更新时间"  width="140" ></el-table-column>
				<el-table-column prop="username" width="80" label="更新人"></el-table-column>
				<el-table-column  width="80" label="操作">
					<template #default="scope">
						<el-button type="primary" link @click="viewMap(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="param.page"
				background
				v-model:page-size="param.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total" small>
			</el-pagination>
			<div class="tabsBackground">
				<p class="titleP">
					<span class="title-bole">流程图</span>
				</p>
				<iframe v-show="iframeState" id="show-iframe2"  frameborder=0 name="showHere2" scrolling=auto :src="src2" width="100%" height="300px"></iframe>
			</div>
		</el-dialog>
	</div>
</template>
<script lang="ts">
	import { toRefs, reactive, defineComponent } from 'vue'
	import {workflowApi} from '/@/api/workflowapi'
	export default defineComponent ({
		setup(props, ctx) {
			const state = reactive({
				visible: false,
				iframeState: true,
				loading: false,
				param: {
					page: 1,
					limit: 10,
					key: ''
				},
				total: 0,
				totalSelect: 0,
				src2: '',
				hisProcessRecordData: [],
				dataListSelections: [],
				dataDictionaryList: {},
				processlistHis: [],
			})
			// 打开弹窗
			const openDialog = (processDefinitionId: string, key: string, deploymentId: string) => {
				state.param.key=key
				state.visible = true
				state.src2 = import.meta.env.VITE_API_URL + '/activiti/diagram-viewer/index.html?processDefinitionId=' + processDefinitionId + '&processInstanceId=' + ''
				loaddata()
			}
			const refreshEmit = () => {
				closeDialog()
				ctx.emit('refreshDataList')
			}
			// 关闭弹窗
			const closeDialog = () => {
				state.visible = false;
			}
			// 分页改变
			const onHandleSizeChange = (val: number) => {
				state.param.limit = val;
				loaddata()
			}
			// 分页改变
			const onHandleCurrentChange = (val: number) => {
				state.param.page = val;
				loaddata()
			}
			const loaddata = () => {
				workflowApi().getProcessList(state.param).then((data) => {
					state.processlistHis = data.list
					state.loading = false
					state.total = data.totalCount
				})
			}
			const viewMap = (row: any) => {
				state.src2 = import.meta.env.VITE_API_URL + '/activiti/diagram-viewer/index.html?processDefinitionId=' + row.id + '&processInstanceId=' + ''
			}
			return{
				openDialog,
				closeDialog,
				refreshEmit,
				loaddata,
				onHandleSizeChange,
				onHandleCurrentChange,
				viewMap,
				...toRefs(state),
			}
		}
	})
</script>

<style>

</style>